<div class="cd-navbar-main">
  <cd-pwd-expiration-notification></cd-pwd-expiration-notification>
  <cd-telemetry-notification></cd-telemetry-notification>
  <cd-motd></cd-motd>
  <cd-notifications-sidebar></cd-notifications-sidebar>
  <div class="cd-navbar-top">
    <nav class="navbar navbar-expand-md navbar-dark cd-navbar-brand">
      <button class="btn btn-link py-0 ms-3"
              (click)="showMenuSidebar = !showMenuSidebar"
              aria-label="toggle sidebar visibility">
        <i class="fa fa-bars fa-2x"
           aria-hidden="true"></i>
      </button>

      <a class="navbar-brand ms-2"
         href="#">
        <img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
             alt="Ceph" />
      </a>

      <button type="button"
              class="navbar-toggler"
              (click)="toggleRightSidebar()">
        <span i18n
              class="sr-only">Toggle navigation</span>
        <span class="">
          <i class="fa fa-navicon fa-lg"></i>
        </span>
      </button>

      <div class="collapse navbar-collapse"
           [ngClass]="{'show': rightSidebarOpen}">
        <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
          <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
        </ul>
      </div>
    </nav>
  </div>

  <div class="wrapper">
    <!-- Content -->
    <nav id="sidebar"
         [ngClass]="{'active': !showMenuSidebar}">
      <ngx-simplebar [options]="simplebar">
        <ul class="list-unstyled components cd-navbar-primary">
          <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
        </ul>
      </ngx-simplebar>
    </nav>

    <!-- Page Content -->
    <div id="content"
         [ngClass]="{'active': !showMenuSidebar}">
      <ng-content></ng-content>
    </div>
  </div>

  <ng-template #cd_utilities>
    <li class="nav-item">
      <cd-language-selector class="cd-navbar"></cd-language-selector>
    </li>
    <li class="nav-item">
      <cd-notifications class="cd-navbar"
                        (click)="toggleRightSidebar()"></cd-notifications>
    </li>
    <li class="nav-item">
      <cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
    </li>
    <li class="nav-item">
      <cd-administration class="cd-navbar"></cd-administration>
    </li>
    <li class="nav-item">
      <cd-identity class="cd-navbar"></cd-identity>
    </li>
  </ng-template>

  <ng-template #cd_menu>
    <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
      <!-- Dashboard -->
      <li routerLinkActive="active"
          class="nav-item tc_menuitem_dashboard">
        <a routerLink="/dashboard"
           class="nav-link">
          <span i18n>Dashboard</span>&nbsp;
          <i [ngClass]="[icons.health]"
             [ngStyle]="summaryData?.health_status | healthColor"></i>
        </a>
      </li>

      <!-- Cluster -->
      <li routerLinkActive="active"
          class="nav-item tc_menuitem_cluster"
          *ngIf="permissions.hosts.read || permissions.monitor.read ||
          permissions.osd.read || permissions.configOpt.read ||
          permissions.log.read || permissions.prometheus.read">
        <a (click)="toggleSubMenu('cluster')"
           class="nav-link dropdown-toggle"
           [attr.aria-expanded]="displayedSubMenu === 'cluster'"
           aria-controls="cluster-nav"
           role="button">
          <ng-container i18n>Cluster</ng-container>
        </a>
        <ul class="list-unstyled"
            id="cluster-nav"
            [ngbCollapse]="displayedSubMenu !== 'cluster'">
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_hosts"
              *ngIf="permissions.hosts.read">
            <a i18n
               routerLink="/hosts">Hosts</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_cluster_inventory"
              *ngIf="permissions.hosts.read">
            <a i18n
               routerLink="/inventory">Physical Disks</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_cluster_monitor"
              *ngIf="permissions.monitor.read">
            <a i18n
               routerLink="/monitor/">Monitors</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_cluster_services"
              *ngIf="permissions.hosts.read">
            <a i18n
               routerLink="/services/">Services</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_osds"
              *ngIf="permissions.osd.read">
            <a i18n
               routerLink="/osd">OSDs</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_configuration"
              *ngIf="permissions.configOpt.read">
            <a i18n
               routerLink="/configuration">Configuration</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_crush"
              *ngIf="permissions.osd.read">
            <a i18n
               routerLink="/crush-map">CRUSH map</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_modules"
              *ngIf="permissions.configOpt.read">
            <a i18n
               routerLink="/mgr-modules">Manager Modules</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_users"
              *ngIf="permissions.configOpt.read">
            <a i18n
               routerLink="/ceph-users">Users</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_log"
              *ngIf="permissions.log.read">
            <a i18n
               routerLink="/logs">Logs</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_monitoring"
              *ngIf="permissions.prometheus.read">
            <a routerLink="/monitoring">
              <ng-container i18n>Monitoring</ng-container>
              <small *ngIf="prometheusAlertService.activeCriticalAlerts > 0"
                     class="badge badge-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</small>
              <small *ngIf="prometheusAlertService.activeWarningAlerts > 0"
                     class="badge badge-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</small>
            </a>
          </li>
        </ul>
      </li>

      <!-- Pools -->
      <li routerLinkActive="active"
          class="nav-item tc_menuitem_pool"
          *ngIf="permissions.pool.read">
        <a class="nav-link"
           i18n
           routerLink="/pool">Pools</a>
      </li>

      <!-- Block -->
      <li routerLinkActive="active"
          class="nav-item tc_menuitem_block"
          *ngIf="(permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read) &&
          (enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi)">
        <a class="nav-link dropdown-toggle"
           (click)="toggleSubMenu('block')"
           [attr.aria-expanded]="displayedSubMenu === 'block'"
           aria-controls="block-nav"
           role="button"
           [ngStyle]="blockHealthColor()">
          <ng-container i18n>Block</ng-container>
        </a>

        <ul class="list-unstyled"
            id="block-nav"
            [ngbCollapse]="displayedSubMenu !== 'block'">
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_block_images"
              *ngIf="permissions.rbdImage.read && enabledFeature.rbd">
            <a i18n
               routerLink="/block/rbd">Images</a>
          </li>

          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_block_mirroring"
              *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
            <a routerLink="/block/mirroring">
              <ng-container i18n>Mirroring</ng-container>
              <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
                     class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
              <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
                     class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
            </a>
          </li>

          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_block_iscsi"
              *ngIf="permissions.iscsi.read && enabledFeature.iscsi">
            <a i18n
               routerLink="/block/iscsi">iSCSI</a>
          </li>
        </ul>
      </li>

      <!-- NFS -->
      <li routerLinkActive="active"
          class="nav-item tc_menuitem_nfs"
          *ngIf="permissions.nfs.read && enabledFeature.nfs">
        <a i18n
           class="nav-link"
           routerLink="/nfs">NFS</a>
      </li>

      <!-- Filesystem -->
      <li routerLinkActive="active"
          class="nav-item tc_menuitem_cephfs"
          *ngIf="permissions.cephfs.read && enabledFeature.cephfs">
        <a i18n
           class="nav-link"
           routerLink="/cephfs">File Systems</a>
      </li>

      <!-- Object Gateway -->
      <li routerLinkActive="active"
          class="nav-item tc_menuitem_rgw"
          *ngIf="permissions.rgw.read && enabledFeature.rgw">
        <a class="nav-link dropdown-toggle"
           (click)="toggleSubMenu('rgw')"
           [attr.aria-expanded]="displayedSubMenu === 'rgw'"
           aria-controls="gateway-nav"
           role="button">
          <ng-container i18n>Object Gateway</ng-container>
        </a>
        <ul class="list-unstyled"
            id="gateway-nav"
            [ngbCollapse]="displayedSubMenu !== 'rgw'">
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_rgw_daemons">
            <a i18n
               routerLink="/rgw/daemon">Daemons</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_rgw_users">
            <a i18n
               routerLink="/rgw/user">Users</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_rgw_buckets">
            <a i18n
               routerLink="/rgw/bucket">Buckets</a>
          </li>
          <li routerLinkActive="active"
              class="tc_submenuitem tc_submenuitem_rgw_buckets">
            <a i18n
               routerLink="/rgw/multisite">Multisite</a>
          </li>
        </ul>
      </li>
    </ng-container>
  </ng-template>

</div>
